<script setup>
import { onMounted, ref } from "vue";
import luckysheet from "luckysheet";
import LuckyExcel from "luckyexcel";
import index from "@/components/analysisSheetComponents/gufei/tmpl106/index.vue";
import { useAnalysetStore } from "@/store/index";
import Index from "@/views/analysisSheet/soil/tmpl96/index.vue";
import AnalyesAPI from "@/api/system/analyes";
import dayjs from "dayjs";
import { removeNullSampleSN } from "@/utils/method";

let options = {
  container: "luckysheet", //luckysheet为容器id
  lang: "zh",
  autoCalculate: true,
  data: [
    {
      row: 10, // 工作表的下标
      column: 10, // 列数
      defaultRowHeight: 30, // 自定义行高
      defaultColWidth: 100, // 自定义列宽
      celldata: [
        // 初始化表格数据，第一行包含表头
        { r: 0, c: 0, v: "元素（模式）" }, // A1
        //第二行
        { r: 1, c: 0, v: "检出限(µg/L)" }, // A1
        //第三行
        { r: 2, c: 0, v: "样品编号" }, // A1
        { r: 2, c: 1, v: "类型" }, // A1
        { r: 2, c: 2, v: "稀释倍数f" },
        { r: 2, c: 3, v: "样品浓度ρ(µg/L)" },
        { r: 2, c: 4, v: "测定结果" },
        { r: 2, c: 5, v: "样品浓度ρ(µg/L )" },
        { r: 2, c: 6, v: "测定结果 " },
        { r: 2, c: 7, v: "样品浓度ρ(µg/L) " },
        { r: 2, c: 8, v: " 测定结果 " },
        { r: 2, c: 9, v: "  样品浓度ρ(µg/L)  " },
        { r: 2, c: 10, v: "  测定结果  " },
        { r: 2, c: 11, v: "样品浓度ρ(µg/L    )" },
        { r: 2, c: 12, v: "  测定结果 " },
        { r: 2, c: 13, v: "   样品浓度ρ(µg/L)  " },
        { r: 2, c: 14, v: "   测定结果   " },
        { r: 2, c: 15, v: "   样品浓度ρ( µg/L   )  " },
        { r: 2, c: 16, v: "    测定结果  " },
        { r: 0, c: 17, v: "备注" },
      ], // 初始化数据
      config: {
        merge: {
          "0_0": {
            r: 0, // 起始行
            c: 0, // 起始列
            rs: 1, // 跨越的行数
            cs: 3, // 跨越的列数
          },
          "1_0": {
            r: 1, // 起始行
            c: 0, // 起始列
            rs: 1, // 跨越的行数
            cs: 3, // 跨越的列数
          },
          "0_3": {
            r: 1, // 起始行
            c: 0, // 起始列
            rs: 1, // 跨越的行数
            cs: 2, // 跨越的列数
          },
          "1_3": {
            r: 1, // 起始行
            c: 0, // 起始列
            rs: 1, // 跨越的行数
            cs: 2, // 跨越的列数
          },
          "0_5": {
            r: 1, // 起始行
            c: 0, // 起始列
            rs: 1, // 跨越的行数
            cs: 2, // 跨越的列数
          },
          "1_5": {
            r: 1, // 起始行
            c: 0, // 起始列
            rs: 1, // 跨越的行数
            cs: 2, // 跨越的列数
          },
          "0_7": {
            r: 1, // 起始行
            c: 0, // 起始列
            rs: 1, // 跨越的行数
            cs: 2, // 跨越的列数
          },
          "1_7": {
            r: 1, // 起始行
            c: 0, // 起始列
            rs: 1, // 跨越的行数
            cs: 2, // 跨越的列数
          },
          "0_9": {
            r: 1, // 起始行
            c: 0, // 起始列
            rs: 1, // 跨越的行数
            cs: 2, // 跨越的列数
          },
          "1_9": {
            r: 1, // 起始行
            c: 0, // 起始列
            rs: 1, // 跨越的行数
            cs: 2, // 跨越的列数
          },
          "0_11": {
            r: 1, // 起始行
            c: 0, // 起始列
            rs: 1, // 跨越的行数
            cs: 2, // 跨越的列数
          },
          "1_11": {
            r: 1, // 起始行
            c: 0, // 起始列
            rs: 1, // 跨越的行数
            cs: 2, // 跨越的列数
          },
          "0_13": {
            r: 1, // 起始行
            c: 0, // 起始列
            rs: 1, // 跨越的行数
            cs: 2, // 跨越的列数
          },
          "1_13": {
            r: 1, // 起始行
            c: 0, // 起始列
            rs: 1, // 跨越的行数
            cs: 2, // 跨越的列数
          },
          "0_15": {
            r: 1, // 起始行
            c: 0, // 起始列
            rs: 1, // 跨越的行数
            cs: 2, // 跨越的列数
          },
          "1_15": {
            r: 1, // 起始行
            c: 0, // 起始列
            rs: 1, // 跨越的行数
            cs: 2, // 跨越的列数
          },
          "0_17": {
            r: 1, // 起始行
            c: 0, // 起始列
            rs: 3, // 跨越的行数
            cs: 1, // 跨越的列数
          },
        }, // 合并单元格
        rowlen: {}, // 表格行高
        columnlen: {
          // 设置列宽
          0: 100,
          1: 100,
          2: 100,
          3: 130,
          4: 130,
          5: 130,
          6: 130,
          7: 130,
          8: 130,
          9: 130,
        }, // 表格列宽
        rowhidden: {}, // 隐藏行
        colhidden: {}, // 隐藏列
        borderInfo: {}, // 边框
        authority: {}, // 工作表保护
      },
    },
  ],
  showinfobar: false, // 隐藏信息栏
  showtoolbar: true, // 隐藏工具栏
};
const waterForm = ref({
  bdatas: {
    dcwName: [],
    jcx: [],
    rypz: Array.from({ length: 4 }, () => ({
      bzzbyph: "",
      bzzbynd: "",
      zbyyxrq: "",
      bzsyynd: "",
      pzrq: "",
    })),
    bzqx: {},
    ys: {},
    jhd: {},
    pxycd_fx: {},
    jbycd_fx: {},
    zky_fx: {},
  },
  pxycd: [],
  jbycd: [],
});
const switchAB = ref(true);
const sheetData = ref("");
const jsonData = ref(null);
const checkTime = ref("");
const processedData = ref([]);
const cdatas = ref([]);
const checkDialogVisible = ref(false);
const analyseStatusPage = useAnalysetStore();
const record_sn = analyseStatusPage.waterForm.record_sn;
// 在组件挂载后初始化 Luckysheet
onMounted(() => {
  // 初始化表格
  luckysheet.create(options);
  // 获取表单信息
  getWaterCapacity();
});

// 用于获取最新的表格数据
const getUpdatedData = () => {
  checkDialogVisible.value = true;
};
const handleCheckClose = () => {
  checkDialogVisible.value = false;
};

// 获取——获取 水质容量A   工作表
const getWaterCapacity = () => {
  let josn = {
    // id: analyseStatusPage.waterForm.id,
    id: 1,
    // record_sn: record_sn,
    record_sn: 106,
  };
  AnalyesAPI.getAnalyseACapacity(josn).then((data) => {
    // console.log('获取水质容量 A单', data)
    // waterForm.value = data
    // sheetData.value = data.configs
    // options.data = sheetData.value
    // luckysheet.create(options);
    // processedData.value = data.adatas
  });
};

// 保存新增表单
const handleAddWaterPh = () => {
  console.log(luckysheet.getLuckysheetfile());
  sheetData.value = luckysheet.getLuckysheetfile();
  options.data = sheetData.value; // 将字符串解析为 JSON
  console.log(options.data);
  const data = options.data[0].data.map((row) => {
    return row
      .map((cell) => {
        return cell
          ? {
              field: cell.m || "默认字段",
              value: cell.v || null,
            }
          : null;
      })
      .filter((cell) => cell !== null); // 删除 null 值
  });
  // console.log(data);
  processedData.value = processData(data);
  cdatas.value = removeNullSampleSN(processDate(data));
  // console.log(cdatas.value);

  //   调保存新增接口
  // AnalyesAPI.addWaterCapacity({
  //   ...waterForm.value,
  //   // record_sn: record_sn,
  //   record_sn: 106,
  //   // id: analyseStatusPage.waterForm.id,
  //   task_id: analyseStatusPage.waterForm.taskId,
  //   configs: sheetData.value,
  //   add_form_id: analyseStatusPage.waterForm.add_form_id,
  //   adatas: processedData.value,
  //   cdatas: cdatas.value,
  // }).then((data) => {
  //   console.log("调接口拿数据", data);
  // });
};

// 处理能用的数据
const processData = (data) => {
  if (!data || data.length < 3) return [];

  // 提取表头信息
  const header1 = data[0]
    .map((item) => item.value)
    .filter((value) => value !== null);
  const header2 = data[1]
    .map((item) => item.value)
    .filter((value) => value !== null);
  const header3 = data[2]
    .map((item) => item.value)
    .filter((value) => value !== null);

  waterForm.value.bdatas.dcwName.push(...header1.slice(1, 6));
  waterForm.value.bdatas.jcx.push(...header2.slice(1, 6));

  // 提取数据行
  const rows = data
    .slice(3)
    .map((rowData) => rowData.map((item) => item.value));

  // 构建嵌套结构
  return rows.map((row) => {
    const result = header3.slice(0, 17).reduce((acc, key, index) => {
      acc[key] = row[index];
      return acc;
    }, {});
    result[header1[8]] = row[17]; // 额外的字段
    return result;
  });
};

// 剔除样品浓度ω( )
const extractBracketContent = (text) => {
  const match = text.match(/\((.*?)\)/);
  return match ? match[1] : text; // 如果匹配成功，返回括号内的内容，否则返回原文本
};
const processDate = (data) => {
  if (!data || data.length < 3) {
    return [];
  }
  // 提取表头信息
  const header1 = data[0]
    .map((item) => item.value)
    .filter((value) => value !== null);
  const header2 = data[1]
    .map((item) => item.value)
    .filter((value) => value !== null);
  const header3 = data[2]
    .map((item) => item.value)
    .filter((value) => value !== null);
  // 提取数据行
  // const row = data[2].map(item => item.value);
  const row = data.slice(3).map((rowData) => rowData.map((item) => item.value));
  console.log(row);
  // 构建嵌套结构
  const resultArray = [];
  for (let i = 0; i < row.length; i++) {
    const currentRow = row[i];
    const result = {
      sample_sn: currentRow[0] || null,
      type: currentRow[1] || null,
      datas: [
        {
          name: header1[1] || null,
          cdjg: currentRow[4] || null,
          limit_val: header2[1] || null,
          // dw: extractBracketContent(header3[3]) || null,
        },
        {
          name: header1[2] || null,
          cdjg: currentRow[6] || null,
          limit_val: header2[2] || null,
          // dw: extractBracketContent(header3[5]) || null,
        },
        {
          name: header1[3] || null,
          cdjg: currentRow[8] || null,
          limit_val: header2[3] || null,
          // dw: extractBracketContent(header3[7]) || null,
        },
        {
          name: header1[4] || null,
          cdjg: currentRow[10] || null,
          limit_val: header2[4] || null,
          // dw: extractBracketContent(header3[9]) || null,
        },
        {
          name: header1[5] || null,
          cdjg: currentRow[12] || null,
          limit_val: header2[5] || null,
          // dw: extractBracketContent(header3[11]) || null,
        },
        {
          name: header1[6] || null,
          cdjg: currentRow[14] || null,
          limit_val: header2[6] || null,
          // dw: extractBracketContent(header3[13]) || null,
        },
        {
          name: header1[7] || null,
          cdjg: currentRow[16] || null,
          limit_val: header2[7] || null,
          // dw: extractBracketContent(header3[15]) || null,
        },
      ],
    };
    resultArray.push(result);
  }
  return resultArray;
};

// 确认提交校核
const handleSubmit = () => {
  console.log(checkTime.value);
  const formattedDate = checkTime.value
    ? dayjs(checkTime.value).format("YYYY-MM-DD")
    : "";
  console.log(analyseStatusPage.waterForm.id);
  AnalyesAPI.handleCheckTimeData({
    id: analyseStatusPage.waterForm.add_form_id,
    submit_date: formattedDate,
  }).then((data) => {
    if (data === 1) {
      ElMessage.success("提交成功！");
      checkDialogVisible.value = false;
    }
  });
};

// 上传文件
const loadExcel = (evt) => {
  const files = evt.target.files;
  console.log(files);
  if (files == null || files.length == 0) {
    alert("No files wait for import");
    return;
  }
  let name = files[0].name;
  let suffixArr = name.split("."),
    suffix = suffixArr[suffixArr.length - 1];
  if (suffix != "xlsx") {
    alert("Currently only supports the import of xlsx files");
    return;
  }
  LuckyExcel.transformExcelToLucky(
    files[0],
    function (exportJson, luckysheetfile) {
      if (exportJson.sheets == null || exportJson.sheets.length == 0) {
        alert(
          "Failed to read the content of the excel file, currently does not support xls files!"
        );
        return;
      }
      console.log("exportJson", exportJson.sheets);
      jsonData.value = exportJson;

      luckysheet.destroy();
      luckysheet.create({
        container: "luckysheet", //luckysheet is the container id
        showinfobar: false,
        data: exportJson.sheets,
        title: exportJson.info.name,
        userInfo: exportJson.info.name.creator,
      });
    }
  );
};

const handleSwitch = () => {
  switchAB.value = !switchAB.value;
};
</script>

<template>
  <div class="card">
    <div v-show="switchAB">
      <el-card class="box-card">
        <h1 style="text-align: center">
          固废浸出液 电感耦合等离子体质谱法分析原始记录（A面）
        </h1>
        <div>SXLPHJ/JL/CX-22-106</div>
        <table class="table">
          <tr style="background-color: #f2f2f2">
            <td colspan="2" style="width: 9%">任务编号</td>
            <td colspan="4">
              <el-input
                v-model="waterForm.task_name"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td colspan="2" style="width: 9%">采样日期</td>
            <td colspan="3">
              <el-input
                v-model="waterForm.sampling_time"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td colspan="2" style="width: 9%">分析日期</td>
            <td colspan="4">
              <el-input
                v-model="waterForm.anal_time"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td colspan="3" style="width: 14%">环境温度</td>
            <td colspan="5">
              <el-input
                v-model="waterForm.temperature"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
          <tr>
            <td colspan="2" style="width: 9%">分析仪器</td>
            <td colspan="4">
              <el-input
                v-model="waterForm.device_name"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td colspan="2" style="width: 10%">仪器型号</td>
            <td colspan="3">
              <el-input
                v-model="waterForm.device_model"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td colspan="2">仪器编号</td>
            <td colspan="4">
              <el-input
                v-model="waterForm.device_number"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td colspan="3" style="width: 14%">环境湿度</td>
            <td colspan="5">
              <el-input
                v-model="waterForm.humidity"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              >
                <template #append>
                  <span style="background-color: transparent; color: black">
                    %RH
                  </span>
                </template>
              </el-input>
            </td>
          </tr>
          <tr style="background-color: #f2f2f2">
            <td colspan="2" style="width: 9%">分析方法</td>
            <td colspan="9">
              <el-input
                v-model="waterForm.method"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              >
                >
              </el-input>
            </td>
            <td colspan="2">内标元素</td>
            <td colspan="4">
              <el-input
                v-model="waterForm.nbys"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td colspan="3" style="width: 14%">内标响应范围</td>
            <td colspan="5">
              <el-input
                v-model="waterForm.nbxyfw"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
          <tr>
            <td colspan="2">浸出液制备方法</td>
            <td colspan="7">
              <el-input
                v-model="waterForm.jcyzbff"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td colspan="2" rowspan="2" style="width: 10%">仪器条件</td>
            <td colspan="6" rowspan="2">
              <el-input
                v-model="waterForm.yqtj"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td colspan="3" rowspan="2" style="width: 10%">计算公式</td>
            <td colspan="5" rowspan="2">
              <el-input
                v-model="waterForm.js_formula"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
          <tr>
            <td colspan="2">样品前处理</td>
            <td colspan="7">
              <el-input
                v-model="waterForm.process"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
          <tr>
            <td colspan="2">备注</td>
            <td colspan="19">
              <el-input
                v-model="waterForm.notes"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
        </table>
        <!--      <input id="uploadBtn" type="file" @change="loadExcel"/>-->
        <div id="luckysheet" style="width: 100%; height: 500px" />
      </el-card>
    </div>
    <div v-show="!switchAB">
      <index :water-form="waterForm" />
    </div>
    <el-card class="box-card" style="margin-top: 30px">
      <div style="display: flex; justify-content: space-between">
        <el-button @click="handleSwitch">
          {{ switchAB ? "B面" : "A面" }}
        </el-button>
        <div>
          <el-button>取消</el-button>
          <el-button>新增</el-button>
          <el-button>复制并新增</el-button>
          <el-button @click="handleAddWaterPh">保存</el-button>
          <el-button type="primary" @click="getUpdatedData">提交</el-button>
        </div>
      </div>
    </el-card>

    <!--    提交校核-->
    <el-dialog
      v-model="checkDialogVisible"
      title="提交校核"
      width="30%"
      center
      :before-close="handleCheckClose"
    >
      <div class="check">
        <!--        头部-->
        <div
          class="check-header"
          style="display: flex; align-items: center; margin-bottom: 20px"
        >
          <p>表单填写日期：</p>
          <el-date-picker
            v-model="checkTime"
            style="border: 1px solid #cccccc; border-radius: 6px; width: 70%"
            type="date"
            placeholder="请选择"
          />
        </div>
        <div class="check-footer">
          <el-button style="width: 48%" @click="handleCheckClose">
            取消
          </el-button>
          <el-button type="primary" style="width: 48%" @click="handleSubmit">
            确认
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.card {
  padding: 20px 25px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  /* 表格边框合并 */
  text-align: left;
  /* 默认左对齐 */
  font-size: 14px;
  /* 字体大小 */
  color: #606266;
  /* 默认字体颜色 */
  margin-bottom: 20px;
}

.table th,
.table td {
  border: 1px solid #c2bfbf;
  /* 表格单元格边框颜色 */
  padding: 12px;
  /* 单元格内边距 */
}

.table th {
  background: #f5f7fa;
  /* 表头背景色 */
  font-weight: 600;
  /* 表头字体加粗 */
  color: #303133;
  /* 表头字体颜色 */
  text-align: center;
  /* 表头居中 */
}

.table td {
  width: 15%;
}

.table-td {
  display: flex;
}

::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input-group__append {
  background-color: transparent;
  box-shadow: none;
}
</style>
